<template>
  <div class="bg">
    <div class="card">
      <h3>昆虫展览后台管理系统</h3>
      <el-input placeholder="请输入账号"
                @keyup.enter.native="login"
                clearable
                prefix-icon="iconfont iconperson"
                v-model="username">
      </el-input>
      <el-input placeholder="请输入密码"
                @keyup.enter.native="login"
                clearable
                v-model="password"
                prefix-icon="iconfont iconmima1"
                show-password>
      </el-input>
      <el-input placeholder="请输入验证码"
                @keyup.enter.native="login"
                clearable
                class="code"
                prefix-icon="iconfont icondunpai"
                v-model="code">
      </el-input>
      <img :src="src"
           style="cursor: pointer;"
           @click="changeImg"
           alt="验证码">
      <el-button type="primary"
                 @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      code: "",
      src: "/insect/validCode"
    };
  },
  methods: {
    login() {
      let params = new URLSearchParams();
      params.append("username", this.username);
      params.append("password", this.md5(this.password));
      params.append("code", this.code);
      this.axios({
        method: "post",
        url: "/admin/login",
        params
      })
        .then(res => {
          if (res.data.code === 0) {
            this.message(res.data.msg, "success");
            this.$router.push("/material");
          } else {
            this.changeImg();
            this.message(res.data.msg, "error");
          }
        })
        .catch(error => {
          this.message(error, "error");
        });
    },
    // 点击更换验证码
    changeImg() {
      let time = +new Date();
      this.src = this.src + "?=" + time;
    }
  }
};
</script>

<style scoped>
.bg {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: url("../../assets/img/bg.png");
}
.card {
  position: absolute;
  width: 380px;
  height: 400px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px;
  background: hsla(0, 0%, 100%, 0.6) border-box;
}
h3 {
  font-size: 1.5em;
  color: rgb(43, 163, 230);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 40px;
}
.el-input {
  width: 70%;
  display: block;
  margin: 25px auto;
}
.code {
  width: 42%;
  display: inline-block;
  margin: 0 0 40px 57px;
}
img {
  width: 90px;
  height: 40px;
  float: right;
  border-radius: 3px;
  margin-right: 58px;
}
.card /deep/ .el-input__prefix {
  width: 30px;
}
.card /deep/ .el-input__inner {
  padding-left: 38px;
}
.el-button {
  letter-spacing: 2px;
  width: 266px;
  display: block;
  margin: auto;
}
</style>